import React, { Component } from 'react'
import { Card, Table, Modal, Button, message } from 'antd'
import Axios from '../../../axios'
import Utils from '../../../utils/Utils'

class BasicTable extends Component {
    state = {
        dataSource_2: []
    }
    params = {
        page: 1
    }
    componentDidMount = () => {
        this.request()
    }
    //请求表格数据
    request = () => {
        let _this = this
        Axios.ajax({
            url: '/table/list',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then((res) => {
            if (res.code == '0') {
                res.result.list.map((item, index) => {
                    item.key = index;
                })
                this.setState({
                    dataSource_2: res.result.list,
                    pagination: Utils.pagination(res, (current) => {
                        _this.params.page = current;
                        this.request();
                    })
                })
            }
        })
    }
    onRowClick = (record) => {
        Modal.info({
            title: '信息',
            content: `用户名：${record.username}`
        })
        this.setState({
            selectedRowKeys: record.id,
            selectItem: record
        })
    }
    // 多选执行删除动作
    handleDelete = (() => {
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title: '删除提示',
            content: `您确定要删除这些数据吗？${ids.join(',')}`,
            onOk: () => {
                message.success('删除成功');
                //this.request();
            }
        })
    })
    render() {
        const dataSource = [{
            id: '1',
            key: '1',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '1998 - 01 - 19',
            age: 31,
            address: '西湖区湖底公园1号',
            time: '9:00'
        }, {
            id: '2',
            key: '2',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '2998 - 02 - 29',
            age: 32,
            address: '西湖区湖底公园2号',
            time: '9:00'
        }, {
            id: '3',
            key: '3',
            username: '胡彦斌',
            sex: '1',
            interest: '6',
            birthday: '3998 - 03 - 39',
            age: 32,
            address: '西湖区湖底公园3号',
            time: '9:00'
        }, {
            id: '4',
            key: '4',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '4998 - 04 - 49',
            age: 32,
            address: '西湖区湖底公园4号',
            time: '9:00'
        }, {
            id: '5',
            key: '5',
            username: '胡彦斌',
            sex: '1',
            interest: '4',
            birthday: '5998 - 05 - 59',
            age: 32,
            address: '西湖区湖底公园5号',
            time: '9:00'
        }, {
            id: '6',
            key: '6',
            username: '胡彦斌',
            sex: '1',
            interest: '5',
            birthday: '6998 - 06 - 69',
            age: 32,
            address: '西湖区湖底公园6号',
            time: '9:00'
        }
        ]
        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render(sex) {
                return (sex == '1' ? '男' : '女')
            }
        },
        {
            title: '爱好',
            key: 'interest',
            dataIndex: 'interest',
            render(interest) {
                let config = {
                    '1': '游泳',
                    '2': '打篮球',
                    '3': '踢足球',
                    '4': '跑步',
                    '5': '爬山',
                    '6': '骑行',
                    '7': '桌球',
                    '8': '麦霸'
                }
                return config[interest]
            }
        }, {
            title: '生日',
            key: 'birthday',
            dataIndex: 'birthday'
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: '早起时间',
            key: 'time',
            dataIndex: 'time'
        }]
        const rowSelection = {
            type: 'radio',
            selectedRowKeys: this.state.selectedRowKeys
        }
        const rowCheckSelection = {
            type: 'checkbox',
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        };
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="ajax数据-基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource_2}
                        pagination={this.state.pagination}
                    />
                </Card>
                <Card title="单选-基础表格">
                    <Table
                        bordered
                        columns={columns}
                        rowSelection={rowSelection}
                        onRow={(record) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record)
                                }
                            }
                        }}
                        dataSource={dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="多选-基础表格">
                    <div style={{ marginBottom: 10 }}>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowSelection={rowCheckSelection}
                        dataSource={dataSource}
                        pagination={false}
                    />
                </Card>
            </div>
        )
    }
}
export default BasicTable